<template>
    <div class="personal-settings">
        <div class="personal-settings__header">
            <div class="avatar-block">
                <span class="avatar-block_span">
                    <img :src="userInfo.Avatar" class="avatar-block_img" />
                </span>
                <div class="avatar-block_edit">
                    <i v-html="EditWhiteSvg"></i>
                </div>
            </div>
            <span class="userInfo-username">
                <span id="UserNameTopID">
                    {{ userInfo.UserName }}
                </span>
                <i v-show="userInfo.Gender === ''"></i>
                <i v-show="userInfo.Gender === '男'" class="el-icon-male" style="color:#0078d4;"></i>
                <i v-show="userInfo.Gender === '女'" class="el-icon-female" style="color:pink;"></i>
            </span>
            <div style="display: flex;">
                <div class="userInfo-header_baseinfo flex-center">
                    <span id="UserOrgID" v-show="organizationInfo" title="组织信息"
                        style="margin-right: 30px;white-space: nowrap;">
                        <i v-html="organInfoSvg" style="padding-right: 8px;"></i>
                        <span class="userInfo-header_infoname">{{ organizationInfo }}</span>
                    </span>
                    <span v-show="userInfo.EMail" title="邮箱" class="flex-center"
                        style="padding-right: 20px;white-space: nowrap;min-width: 125px;">
                        <i class="icon-t-email" style="padding-right: 8px;"></i>
                        <span id="UserEmailID" style="position: relative;padding-right: 20px;">
                            {{ userInfo.EMail }}
                        </span>
                    </span>
                    <span v-show="userInfo.AreaCodeAndMobile || userInfo.Mobile" title="手机号"
                        style="min-width: 110px;white-space: nowrap;" class="flex-center">
                        <i class=" icon-t-mobile" style="padding-right: 8px;"></i>
                        <span id="UserTopMobileID" style="position: relative;padding-right: 20px;">
                            {{ userInfo.AreaCodeAndMobile || userInfo.Mobile }}
                        </span>
                    </span>
                </div>
            </div>
            <!-- 保存按钮区域已移除 -->
        </div>

        <div class="personal-settings__content">
            <!-- 用户信息模块 -->
            <div class="settings-section">
                <h2 class="section-title">用户信息</h2>
                <div class="section-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">昵称</label>
                            <input v-model="userInfo.Account" type="text" class="form-input" placeholder="请输入昵称"
                                readonly />
                        </div>
                        <div class="form-group">
                            <label class="form-label">姓名</label>
                            <input v-model="userInfo.UserName" type="text" class="form-input" placeholder="请输入姓名"
                                readonly />
                        </div>
                        <div class="form-group">
                            <label class="form-label">手机号</label>
                            <input v-model="userInfo.Mobile" type="text" class="form-input" placeholder="请输入手机号"
                                readonly />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">账户ID</label>
                            <input v-model="userInfo.UserId" type="text" class="form-input" readonly />
                        </div>
                        <div class="form-group">
                            <label class="form-label">账户状态</label>
                            <input v-model="userInfo.Status" type="text" class="form-input" readonly />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 安全设置模块 -->
            <div class="settings-section">
                <h2 class="section-title">安全设置</h2>
                <div class="section-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">密码</label>
                            <div class="password-group">
                                <span class="password-change">修改密码</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统设置模块 -->
            <div class="settings-section">
                <h2 class="section-title">系统设置</h2>
                <div class="section-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">系统主题</label>
                            <div class="theme-selector">
                                <div class="web-userInfo-theme" style="display:flex;flex-wrap: wrap;">
                                    <span style="display: inline-block;" v-for="(item, index) in THEME_COLORS"
                                        :key="index">
                                        <Popover position="top" trigger="hover" :showArrow="true"
                                            customClass="theme-tooltip" :offset="[-4, 0]">
                                            <template v-slot:reference>
                                                <input :name="item.label" type="checkbox"
                                                    :style="{ '--Theme-color': item.value, '--content-color': item.label === 'white' ? '#0078d4' : '#FFFFFF' }"
                                                    :checked="selectedTheme === item.label"
                                                    @click="selectTheme(item.label)" />
                                            </template>
                                            <div class="theme-tooltip-content">{{ item.name }}</div>
                                        </Popover>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能设置模块 -->
            <div class="settings-section">
                <h2 class="section-title">功能设置</h2>
                <div class="section-content">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">功能打开</label>
                            <div class="dropdown-container">
                                <Dropdown class="dropdown_selector-sm" v-model="funcOpenMode"
                                    :options="FUNC_OPEN_OPTIONS" @change="handleLinkOpenModeChange" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import userProfileService from '@/service/userProfileService'
import { organInfoSvg, EditWhiteSvg } from '@/constants/svg'
import { THEME_COLORS, DEFAULT_THEME } from '@/constants/theme'
import { changeTheme } from '@/service/commonService'
import { FUNC_OPEN_TYPE, FUNC_OPEN_OPTIONS } from '@/constants/layout'
import Popover from '@/components/common/Popover.vue'
import Dropdown from '@/components/common/Dropdown.vue'
// 用户信息数据
const userInfo = reactive({
    Status: '使用中',
})



// 计算组织信息显示，如果有公司和部门则显示"公司-部门"，如果只有一个则只显示一个
const organizationInfo = computed(() => {
    if (userInfo.CompanyName && userInfo.DepartmentName) {
        return `${userInfo.CompanyName}-${userInfo.DepartmentName}`;
    } else if (userInfo.CompanyName) {
        return userInfo.CompanyName;
    } else if (userInfo.DepartmentName) {
        return userInfo.DepartmentName;
    }
    return '';
})

// 从服务获取用户信息
const fetchUserInfo = async () => {
    try {
        // 直接获取已映射的用户信息
        const userInfoData = await userProfileService.getUserInfo()
        Object.assign(userInfo, userInfoData)

    } catch (error) {
        console.error('获取用户信息失败:', error)
    }
}



// 组件挂载时获取用户信息
onMounted(() => {
    fetchUserInfo()
})

// 使用从用户配置获取的主题颜色
const selectedTheme = ref(userProfileService.getUserProfile('wrp_theme') || DEFAULT_THEME)


const funcOpenMode = ref(userProfileService.getUserProfile('wrp_funcOpenMode') || FUNC_OPEN_TYPE.CURRENT)

// 处理链接打开方式变更
const handleLinkOpenModeChange = (mode) => {
    userProfileService.saveUserProfile('wrp_funcOpenMode', mode)
    console.log(`链接打开方式已更改为: ${mode === FUNC_OPEN_TYPE.CURRENT ? '当前界面打开' : '浏览器新tab打开'}`)
}

// 选择主题
const selectTheme = (color) => {
    selectedTheme.value = color
    changeTheme(color);
}

// 移除未使用的AvatarEditOpen函数

</script>

<style scoped lang="scss">
.personal-settings {
    padding: 8px;

    background: #FFF;
    height: calc(100% - 16px);
    margin: 8px 0;
    border-radius: 12px;
    overflow-y: auto;
    max-height: calc(100% - 16px);
}

.dropdown-container {
    width: 200px;
}

.flex-center {
    display: flex;
    align-items: center;
}

.personal-settings__header {
    margin-bottom: 20px;
    min-height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f2f5;
    margin: 0 24px;
}

.userInfo-username {
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
    padding-right: 24px;
    padding-left: 11px;
    position: relative;
}

.userInfo-header_baseinfo {
    font-size: 14px;
    line-height: 28px;
    display: flex;
}

.web-userInfo-theme {
    position: relative;
    top: 3px;
}

.password-group {
    line-height: 32px;
}

.web-userInfo-theme input[type="checkbox"] {
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #d7d7d7;
    margin: 0 6px 0 0;
    font-family: 'icomoon' !important;
}

.web-userInfo-theme input[type="checkbox"]::after {
    position: absolute;
    top: 0;
    background-color: var(--Theme-color);
    color: var(--content-color);
    width: 20px;
    height: 20px;
    border-radius: 2px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: " ";
    border: 1px solid #d7d7d7;
    border-radius: 1px;
}

.web-userInfo-theme input[type="checkbox"]:checked::after {
    content: "\ea49";
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-block {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.avatar-block_span {
    display: inline-block;
    position: relative;
    line-height: 32px;
    border-radius: 50%;
}

.dropdown_selector-sm {
    width: 225px;
}

.avatar-block_span:hover+.avatar-block_edit {
    display: block;
}

.avatar-block_edit {
    display: none;
    line-height: 12px;
    background: rgb(24, 24, 24);
    opacity: 0.65;
    bottom: 0px;
    height: 12px;
    cursor: pointer;
    width: 100%;
    position: absolute;
    font-size: 12px;
    text-align: center;
    color: rgb(255, 255, 255);
}


.avatar-block_img {
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}


.personal-settings__title {
    font-size: 24px;
    font-weight: 500;
    color: #333;
}

.settings-section {
    padding: 32px 0 0 24px;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding-bottom: 23px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    width: 83.33333%;
}

.section-content {
    padding-left: 18px;
}

.form-group {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    display: flex;

    box-sizing: border-box;
}


.form-label {
    display: block;
    font-weight: 500;
    width: 20.83333%;
    color: #555;
    height: 32px;
    line-height: 32px;
}

.form-input {
    width: 66.66667%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 2px;
    height: 32px;
    font-size: 14px;
}

.form-input:read-only {
    background-color: #f5f5f5;
    cursor: not-allowed;
}


.password-change {
    cursor: pointer;
    color: var(--theme-color);
}




.theme-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media screen and (max-width: 1560px) {
    .form-group {
        flex-direction: column;
    }

    .form-input {
        width: 80%;
    }

    .form-row {
        width: 100%;
    }
}

@media screen and (max-width: 976px) {
    .form-group {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .userInfo-header_baseinfo {
        flex-direction: column;
        align-items: baseline;
    }
}

/* 移除未使用的样式 */
</style>



<style lang="scss">
.theme-tooltip {
    border-radius: 4px;
    box-shadow: unset !important;
    font-size: 12px !important;
    border: none !important;
    background-color: #303133 !important;
    color: #fff !important;
    padding: 10px !important;
    --arrow-size: 10px !important;

    .custom-tooltip-body-arrow {
        background-color: #303133;
        border: none !important;
    }
}
</style>